<template >
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" @click="goback" size="24" style="float: left;height: 40px;line-height: 40px;"/>
      订单详情
    </div>
    <!-- 流程进度栏 -->
    <status-bar :item="stateMap[detailData.trade_state]"/>
    <!-- 订单状态 -->
    <div class="dzf" v-show="detailData.trade_state==='待支付'">
      <div class="text1">
        订单待支付
      </div>
      <div class="text2">
        请在 
        <counter :second="second"/>
        内完成支付，超时订单自动取消
      </div>
      <div class="text3">
        <van-button type="success" class="van-button" @click="showCodeDialog=true">立即支付（{{ detailData.price }}元）</van-button>
      </div>
    </div>
    <div class="dzf" v-show="detailData.trade_state==='待服务'">
      <div class="text1">正在为您安排服务员</div>
      <div class="text2">请保持手机畅通，稍后将有服务员与您联系</div>
    </div>
    <div class="dzf" v-show="detailData.trade_state==='已完成'">
      <div class="text1">服务已完成</div>
      <div class="text2">感谢您的使用，如有售后问题请联系客服</div>
    </div>
    <div class="dzf" v-show="detailData.trade_state==='已取消'">
      <div class="text1">订单已取消</div>
      <div class="text2">期待下次为您服务，如需帮助可咨询客服</div>
    </div>
    <!-- 订单详细信息展示 -->
    <div class="card">
      <div class="header-text">预约信息</div>
      <van-cell v-for="(item,key) in makeInfo" :key="key" :title="item" :value="formatData(key)"/>
    </div>
    <div class="card">
      <div class="header-text">订单信息</div>
      <van-cell v-for="(item,key) in orderInfo" :key="key" :title="item" :value="formatData(key)"/>
    </div>
  </div>
   <!--支付二维码弹窗  -->
  <van-dialog 
    v-model:show="showCodeDialog" 
    :show-confirm-button="false" 
    :show-cancel-button="false"
    width="250px"
    style="text-align: center;">
    <template #title>
        <van-icon name="cross" style="float: left;margin-left: 10px;" @click="showCodeDialog=false"/>
        <span>微信支付</span>
    </template>
    <img :src="codeUrl" height="150px" width="150px"/>
    <div style="margin-bottom: 10px;">请使用本人微信扫码支付</div>
  </van-dialog>
</template>

<script setup>
import {useRouter,useRoute} from 'vue-router'
import { ref,reactive,getCurrentInstance, onMounted, computed} from 'vue';
import StatusBar from '../../components/statusBar.vue'
import counter from '../../components/counter.vue'
import dayjs from 'dayjs'
import Qrcode from 'qrcode'

dayjs().format()
const {proxy}=getCurrentInstance()
const router=useRouter()
const route=useRoute()
//二维码数据
const showCodeDialog=ref(false)
const codeUrl=ref('')
//订单详细数据
const detailData=reactive({})
//订单id
const oid=route.query.oid
//倒计时数据
const second=computed(()=>{
  return detailData.order_start_time?detailData.order_start_time+7200000-Date.now():0
})
//进度条枚举数据
const stateMap={
  "待支付":'10',
  "待服务":'20',
  "已完成":'30',
  "已取消":'40'
}
const makeInfo = {
  service_name: '预约服务',
  hospital_name: '就诊医院',
  starttime: '期望就诊时间',
  'client.name': '就诊人',
  'client.mobile': '就诊人电话',
  receiveAddress: '接送地址',
  demand: '其他需求'
}
const orderInfo = {
  tel: '就诊人电话',
  order_start_time: '下单时间',
  price: '应付金额',
  out_trade_no: '订单编号'
}
onMounted(async()=>{
 const {data}=await proxy.$api.orderDetail({oid})
 Object.assign(detailData,data)
 //二维码图片地址
  Qrcode.toDataURL(detailData.code_url).then((url)=>{
    codeUrl.value=url
  })
})
//渲染信息方法
const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    //键值中没有'.'的情况
    if (key === "order_start_time") {
      return formatTimestamp(detailData[key]);
    }
    return detailData[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, detailData);
  return arr;
}
//时间格式
function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}
//返回上一页
const goback=()=>{
  router.go(-1)
}

</script>
<style lang="less" scoped>
.container {
    background-color: #f0f0f0;
    height: 137vh;
  }
  .header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    .header-left {
      float: left;
    }
  }
  .card {
    margin: 15px 0;
    padding: 10px;
    .header-text {
      background-color: #fff;
      padding-left: 5px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      border-left: 4px solid red;
    }
  }
  .dzf {
    padding: 20px;
    .text1 {
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
      color: #666;
    }
    .text2 {
      font-size: 14px;
      color: #666;
    }
    .text3 {
      text-align: center;
      .van-button {
        margin-top: 10px;
        margin-left: 10px;
        width: 80%;
        font-weight: bold;
      }
    }
  }
  ::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;
    .close {
      position: absolute;
      left: 20px;
    }
  }
</style>